<template>
  <div class="nav-meun">
    <div class="logo layout">
      <img src="~@/assets/img/xzq3.png" alt="logo" />
      <span v-if="!isFold">世界和平</span>
    </div>
    <menuTree :meuns="userMenu" />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue"
import { useStore } from "@/store/index"
import menuTree from "./menu-tree.vue"
export default defineComponent({
  name: "index",
  props: {
    isCollapse: Boolean
  },
  components: { menuTree },
  setup(props) {
    const store = useStore()
    const isFold = ref(props.isCollapse)
    const userMenu = computed(() => store.state.login.userMenus)
    return {
      userMenu,
      isFold
    }
  }
})
</script>
<style lang="less" scoped>
.nav-meun {
  display: flex;
  flex-direction: column;
  color: #fff;
  height: 100%;
  .logo {
    height: 100px;
    img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    span {
      margin-left: 20px;
    }
  }
  .el-menu-vertical-demo {
    flex: 1;
    background: #c6e2ff;
  }
}
</style>
